import { createStyles } from 'antd-style';
export const useStyles = createStyles(() => {
  return {
    templatePage: {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      gap: '10px',
      height: 'calc(100vh - 64px - 56px - 52px)',
      boxSizing: 'border-box',
      '.section-item': {
        height: '100%',
        background: '#fff',
        overflow: 'auto',
      },
      '.module-section': {
        width: '15%',
        minWidth: '220px',
        padding: '0 10px',
        '.module-item': {
          userSelect: 'none',
          background: '#fff',
          width: '100%',
          height: '40px',
          lineHeight: '40px',
          textAlign: 'center',
          borderRadius: '8px',
          margin: '10px 0',
          cursor: 'pointer',
          border: '1px solid #000',
          '&.active': {
            opacity: 0.5,
            background: 'rgba(0,0,255,0.1)',
          },
        },
      },
      '.template-section': {
        flexGrow: 1,
        padding: '50px',
        '&.drop-over': {
          background: 'rgba(255,255,255,.1)',
        },
        '.content': {
          '.add-item': {
            width: '100%',
            height: '100%',
            userSelect: 'none',
            display: 'flex',
            justifyContent: 'flex-start',
            alignItems: 'center',
            position: 'relative',
            gap: '30px',
            '.item': {
              display: 'flex',
              flexDirection: 'column',
              '&.value': {
                flexGrow: 1,
                'div:first-child': {
                  padding: '0 10px',
                  borderBottom: '1px solid #333',
                },
              },
            },
            '.radio-content': {
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              flexDirection: 'column',
            },
            '&.address-item': {
              gap: '100px',
              '.address-content': {
                width: '100%',
                display: 'flex',
                justifyContent: 'flex-start',
                alignItems: 'flex-start',
              },
              '.address': {
                flexGrow: 1,
                display: 'flex',
                flexDirection: 'column',
                gap: '20px',
                '.address-item': {
                  display: 'flex',
                  justifyContent: 'flex-start',
                  alignItems: 'center',
                  gap: '20px',
                  '&:nth-child(1),&:nth-child(2)': {
                    paddingLeft: '140px',
                  },
                  '.title': {
                    width: '120px',
                  },
                },
              },
            },
            '&.photo-item': {
              '.photo': {
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                background: '#deefff',
                width: '100%',
                height: '100%',
                img: {
                  display: 'block',
                  width: '100%',
                  height: '100%',
                  objectFit: 'contain',
                },
                '.icon-photo': {
                  fontSize: '48px',
                  color: '#fff',
                },
              },
            },
            '.empty': {
              width: '100%',
              height: '100%',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
            },
            '.operation': {
              display: 'none',
              position: 'absolute',
              top: '0px',
              right: '5px',
              transition: 'all .3s ease-in-out',
              cursor: 'pointer',
              color: 'rgba(0,0,0,.5)',
            },
            '.drag-handle': {
              display: 'none',
              position: 'absolute',
              top: '0px',
              left: '50%',
              justifyContent: 'center',
              alignItems: 'center',
              transform: 'translateX(-50%)',
              width: '60px',
              height: '30px',
              cursor: 'move',
              borderRadius: '0 0 4px 4px',
              background: 'rgba(0,0,0,.05)',
            },
            '&:hover': {
              outline: '1px dashed #000',
              borderRadius: '4px',
              '.operation': {
                display: 'block',
              },
              '.drag-handle': {
                display: 'flex',
              },
            },
            '&.render:hover': {
              outline: 'none',
            },
            '&.clarification:hover': {
              outline: 'none',
            },
            '&.replyClarification:hover': {
              outline: 'none',
            },
          },
          '.dev-add-item': {
            border: '1px solid #000',
            borderRadius: '8px',
            cursor: 'pointer',
            userSelect: 'none',
          },
        },
      },
      '.props-section': {
        width: '15%',
        minWidth: '220px',
        padding: '10px',
        background: '#fff',
      },
      '.editable-dom': {
        '&.danger': {
          background: '#ffa4a4',
        },
        outline: 'none',
        padding: '0 5px',
      },
    },
  };
});
